CSS class not working as expected [closed]
Posted
by
user1050619
on Stack Overflow
See other posts from Stack Overflow
or by user1050619
Published on 2012-04-27T17:01:34Z
Indexed on
2012/09/21
15:38 UTC
Read the original article
Hit count: 198
My HTML codes not implement the CSS styling..The border in the CSS file is not being implemented. I tried both in Firefox & IE. Please provide your inputs.
Please find the code below:
HTML
<html>
<head>
<link href="file://c:/jquery/chapter-1/begin/styles/my_style.css" rel="stylesheet">
</head>
<body>
<div id="header" class="no_hover"><h1>Header</h1></div>
<button type="button" id="btn1">Click to Add</button>
<button type="button" id="btn2">Click to Remove</button>
<script src="file://c:/jquery/chapter-1/begin/scripts/jquery.js" type="text/javascript"></script>
<script src="file://c:/jquery/chapter-1/begin/scripts/test4.js" type="text/javascript"></script>
</body>
</html>
jS FILE
$(document).ready(function() {
$("#btn1").click( function(){
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
});
$("#btn2").click( function(){
$("#header").removeClass("hover");
$("#header").addClass("no_hover");
});
});
CSS FILE
.hover{
border: solid #f00 3px;
}
.no_hover{
border: solid #000 3px;
}
© Stack Overflow or respective owner
